<template>
    <el-main>
        <head-table></head-table>
        <!-- 设备信息列表 -->
        <el-table id="out-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange"
            v-loading="loading" border>
            <el-table-column type="selection" width="40">
            </el-table-column>
            <el-table-column prop="id" label="id" width="50">
            </el-table-column>
            <el-table-column prop="model" label="机型" width="140">
            </el-table-column>
            <el-table-column prop="brand" label="品牌" width="auto">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="160">
                <template slot-scope="scope">
                    <el-button @click="handleDelete(scope.row.id)" type="danger" size="mini">删除</el-button>
                    <el-button @click="handleEdit('编辑',scope.row)" type="primary" size="mini">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="paginations.current_page"
            :page-sizes="paginations.page_sizess" :page-size="paginations.page_size" :layout="paginations.layout"
            :total="tableData.length">
        </el-pagination>

        <!-- 删除弹出框 -->
        <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <span>你是否要删除该条记录</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleDeleteOne()">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑弹出框 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="机型" :label-width="formLabelWidth" prop="model">
                    <el-input v-model="form.model" autocomplete="off" type="text"></el-input>
                </el-form-item>
                <el-form-item label="品牌" :label-width="formLabelWidth" prop="brand">
                    <el-input v-model="form.brand" autocomplete="off" type="text"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>


    </el-main>
</template>

<script>
     import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    import axios from 'axios'
    import headTable from '@/common/headTable'
    import exportExcel from '@/utils/excel'
    export default {
        name: 'device',
         components:{
            headTable
        },
        data() {
            return {
                deviceId: 0,
                multipleSelection: [],
                paginations: {
                    total: 0,
                    current_page: 1,
                    page_sizes: [10, 20, 30, 40],
                    page_size: 10,
                    layout: "total, sizes, prev, pager, next, jumper"
                },
                tableData: [],
                dialogVisible: false,
                dialogFormVisible: false,
                form: {
                    id: '',
                    model: '',
                    brand: '',
                },
                formLabelWidth: '120px',
                loading: false,
                dialogTitle: '',
                input: '',
                rules: {
                    model: [{
                        required: true,
                        message: '请输入机型',
                        trigger: 'blur'
                    }],
                    brand: [{
                        required: true,
                        message: '请输入品牌',
                        trigger: 'blur'
                    }],
                }

            }
        },
        methods: {
            exportExcel,
            // 处理表单验证结果
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                       this.handleEditOne()
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                console.log(val)

            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            handleDelete(id) {
                this.deviceId = id
                console.log(this.deviceId)
                this.dialogVisible = true
            },
            handleEdit(title, row) {
                if (row != null) {
                    this.form = row
                } else {
                    this.form = {
                        model: '',
                        brand: ''
                    }
                }
                this.dialogTitle = title
                this.dialogFormVisible = true
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            // 删除一条记录
            handleDeleteOne() {
                console.log(typeof (this.deviceId))
                axios({
                        method: 'post',
                        url: global.url+'/device/del',
                        headers: {
                            'Content-type': 'application/x-www-form-urlencoded'
                        },
                        params: {
                            id: this.deviceId
                        }
                    })
                    .then((response) => {
                        if (response.data.code === 2000) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.getAllDevice()
                        }

                    })
                    .catch(function (error) {
                        console.log(error);

                    });
                this.dialogVisible = false

            },
            // 编辑一条记录
            handleEditOne() {

                if (this.dialogTitle === '添加') {
                    console.log('添加')
                    axios({
                            method: 'post',
                            url: global.url+'/device',
                            headers: {
                                'Content-type': 'application/x-www-form-urlencoded'
                            },
                            params: {
                                model: this.form.model,
                                brand: this.form.brand
                            },
                        }).then((response) => {
                            if (response.data.code === 2000) {
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                })
                                this.getAllDevice()
                            }
                        })
                        .catch((error) => {
                            console.log(error);
                        });
                    this.dialogFormVisible = false
                } else {
                    console.log('编辑')
                    axios({
                            method: 'put',
                            url: global.url+'/device',
                            headers: {
                                'Content-type': 'application/x-www-form-urlencoded'
                            },
                            params: this.form
                        }).then((response) => {
                            if (response.data.code === 2000) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                })
                                this.getAllDevice()
                            }

                        })
                        .catch((error) => {
                            console.log(error);
                        });
                    this.dialogFormVisible = false
                }

            },
            // search
            handleSearch() {
                this.$message('test')
            },
           
            getAllDevice() {
                this.loading = true
                axios.get(global.url + '/device')
                    .then(this.handleGetAllDevice)
                    .catch(function (error) {
                        console.log(error);
                        this.$message.error('系统繁忙');
                    });
            },
            handleGetAllDevice(response) {
                this.loading = false
                let data = response.data
                if (data.code === 2000 && data.count > 0) {
                    this.tableData = data.data
                }
            }
        },
        mounted() {
            this.getAllDevice()
        }
    }
</script>

<style scoped>
    .button {
        margin-bottom: 10px;
    }
</style>